<template>
     <div>
         <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path:'/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片区域 -->
      <el-card>
          <!-- 添加角色按钮 -->
          <el-row >
            <el-col>
              <el-button type="primary" @click="addRoles= true ">添加角色</el-button>
            </el-col>
          </el-row>
    <!-- 表格区域 -->
    <el-table :data="RolesList" border stripe>
        <!-- 下拉表格 -->
      <el-table-column type="expand">
          <template slot-scope="scope">
              <!-- 渲染一级标签 -->
              <el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for="(item1, i1) in scope.row.children" :key="item1.id">
                  <el-col :span="5">
                      <el-tag closable @close="removeRolesById(scope.row,item1.id)">{{item1.authName}}</el-tag>
                      <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 渲染二级标签 -->
                  <el-col :span="19">
                      <el-row v-for="(item2, i2) in item1.children" :key="item2.id" :class="[i2===0?'':'bdtop','vcenter']" >
                          <el-col :span="6" >
                          <el-tag closable @close="removeRolesById(scope.row,item2.id)" type="success" >{{item2.authName}}</el-tag>
                          <i class="el-icon-caret-right"></i>
                          </el-col>
                          <el-col :span="18">
                            <el-tag closable @close="removeRolesById(scope.row,item3.id)" v-for="(item3,i3) in item2.children" :key="item3.id" type="warning">{{item3.authName}} </el-tag>
                          </el-col>
                      </el-row>
                  </el-col>
              </el-row>
          </template>
      </el-table-column>
        <!-- 表单序列index -->
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
      <el-table-column prop="roleName" label="操作">
          <!-- 操作区域 编辑 删除 -->
         <template slot-scope="scope">
            <el-button size="mini" type="primary" class="el-icon-edit" @click="editRoles(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" class="el-icon-delete" @click="removeRoles(scope.row.id)">删除</el-button>
          <el-button size="mini" type="warning" class="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
         </template>
      </el-table-column>
    </el-table>
    <!-- 添加用户对话框 -->
    <el-dialog title="添加角色" :visible.sync="addRoles" width="30%">
 <el-form ref="addRolesRef" :model="addRolesForm" label-width="80px" :rules="addRolesRules">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="addRolesForm.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色名称" prop="roleDesc">
    <el-input v-model="addRolesForm.roleDesc"></el-input>
  </el-form-item>
 </el-form>
 <!-- 添加用户按钮区域 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="addRolesClear">取 消</el-button>
    <el-button type="primary" @click="addRolesMethods">确 定</el-button>
  </span>
</el-dialog>

<!-- 编辑角色对话框 -->
<el-dialog
  title="修改角色"
  :visible.sync="editRolesDialog"
  width="30%">
 <el-form ref="editRolesRef" :model="editRolesForm" label-width="80px" :rules="editRolesRules">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="editRolesForm.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="editRolesForm.roleDesc"></el-input>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editRolesDialog = false">取 消</el-button>
    <el-button type="primary" @click="editRolesSubmit(editRolesForm.roleId)">确 定</el-button>
  </span>
</el-dialog>

<!-- 分配权限对话框 -->
<el-dialog
  title="分配权限"
  :visible.sync="showSetRightVisble" width="30%"  @close="setRoleDialogClose" >
  <!-- 权限列表 树形控件 -->
  <!-- default-checked-keys="defkeys" 绑定defkeys值根据数字值id数字 默认选中的-->
  <!-- data="rolesList" 绑定的渲染的值 -->
  <!-- props="TreeProps" 绑定设置children和label值 -->
 <el-tree :default-checked-keys="defkeys" :data="rolesList" :props="TreeProps" node-key="id" default-expand-all show-checkbox ref="treeRef">

 </el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showSetRightVisble = false">取 消</el-button>
    <el-button type="primary" @click="allotRights">确 定</el-button>
  </span>
</el-dialog>
      </el-card>
     </div>
</template>
<script>
export default {
data () {
    return {
        // 渲染用户列表数据
        RolesList:[],
        // 添加角色对话框的显示与隐藏
        addRoles:false,
        // 添加角色数据
        addRolesForm:{
           roleName:'' ,
           roleDesc:''
        },
        // 添加角色验证规则
        addRolesRules:{
           roleName:{ required: true, message: '请输入角色名称', trigger: 'blur' },
        },
        // 编辑角色表单验证
        editRolesRules:{
             roleName:{ required: true, message: '请输入角色名称', trigger: 'blur' }
        },
        // 编辑角色数据
        editRolesForm:{},
        // 编辑角色对话框
        editRolesDialog:false,
        // 分配权限对话框
        showSetRightVisble:false,
        // 分配权限列表数据
        rolesList:[],
        // 树形控件绑定的属性对象
        TreeProps:{
          children:'children',
          label:'authName'
        },
        // 默认选中的节点ID数组
        defkeys:[],
        // 需要添加分配权限角色的id
        roleId:''
    }
},
// 初始化角色列表
created() {
    this.getRolesList()
},
methods:{
   async getRolesList(){
      const {data:res}= await this.$http.get('roles')
      if(res.meta.status!==200){return this.$message.error('获取角色列表失败')}
      this.RolesList=res.data
    },
    // 点击取消按钮清空角色添加输入框
    addRolesClear(){
        this.$refs.addRolesRef.resetFields()
        this.addRoles=false
    },
    // 表单预验证添加角色
    addRolesMethods(){
        this.$refs.addRolesRef.validate( async val=>{
        if(!val) return
         // 如果val为true 就调用接口
          const {data:res}= await this.$http.post('roles',this.addRolesForm)
          if(res.meta.status!==201) {return this.$message.error('添加角色失败')}
        //   重新渲染角色列表
          this.getRolesList()
        //   对话框隐藏
           this.addRoles=false
        })
},
// 编辑角色事件 获取需要编辑的对象
   async editRoles(id){
     const{data:res}= await this.$http.get('roles/'+id)
     if(res.meta.status!==200) return 
     this.editRolesForm=res.data
     this.editRolesDialog=true
},
    // 编辑角色表单预验证 
    editRolesSubmit(id){
    this.$refs.editRolesRef.validate(async val=>{
        if(!val) return 
        // 表单验证成功就调用接口提交编辑信息
        const {data:res}=await this.$http.put('roles/'+id,{roleName:this.editRolesForm.roleName,roleDesc:this.editRolesForm.roleDesc})
        if(res.meta.status!==200) return this.$message.error('编辑用户错误')
        this.getRolesList()
        this.$message.success('编辑用户成功')
        this.editRolesDialog=false
    })
}, 
// 点击删除按钮 删除角色
async removeRoles(id){
   const confirm=await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch( err=>err)
        // 判断点击的取消还是确定
        if(confirm!=='confirm') return this.$message.info('已取消删除该角色')
        const {data:res} = await this.$http.delete('roles/'+id)
        if(res.meta.status!==200){ return this.$message.error('删除角色失败')}
        this.$message.success('删除用户成功')
        // 点击确认冲洗渲染列表
        this.getRolesList()
    },

    // 根据ID删除对应的权限
   async removeRolesById(role,roghtId) {
    //  判断点击对话框的取消还是确认按钮
      const confirmRusult= await this.$confirm('此操作将永久删除该该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        // console.log(confirmRusult);
        if(confirmRusult!== 'confirm') {return this.$message.info('已取消删除权限')}
        
       const {data:res}=await this.$http.delete(`roles/${role.id}/rights/${roghtId}`)
       if(res.meta.status!==200){return this.$message.error('删除权限失败')}
      //  不重新渲染页面 直接重新赋值
        role.children=res.data
    },

    // 分配权限的对话框
   async showSetRightDialog(role){
    const {data:res} =await this.$http.get('rights/tree')
    if(res.meta.status!==200) {return this.$message.error('获取权限列表失败')}
    // console.log(res);
    this.rolesList=res.data
    // 对话框打开调用默认选中的函数 把需要默认选中的复选框的id 遍历添加到defkeys数组
    this.getLeafKeys(role,this.defkeys)
    this.roleId = role.id
    this.showSetRightVisble=true
    },
    // 利用递归函数遍历每一项角色数据所有的三级ID权限
    getLeafKeys(node,arr){
      // 如果不包含children说明是三级权限
      if(!node.children){
        return arr.push(node.id)
      }
      // 利用递归遍历每一项
      node.children.forEach(item=>{
        this.getLeafKeys(item,arr)
      })
    },
    // 关闭权限分配对话框清空默认选中的复选框
    setRoleDialogClose(){
      this.defkeys= []
    },

// 点击确认按钮调用 提交需要分配的权限
   async allotRights(){
    //  引用树状控件的ref值 调用函数得到全选和半全选的ID值
    //  利用扩展运算符组成数组
      const keys=[
        // 全选
        ...this.$refs.treeRef.getCheckedKeys(),
        // 半全选
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
     const Strkey= keys.join(',')
   const {data:res}= await this.$http.post(`roles/${this.roleId}/rights`,{rids:Strkey})
   if(res.meta.status!==200){return this.$message.error('权限分配失败')}
   this.$message.success('权限分配成功')
  //  重新渲染页面
   this.getRolesList()
  //  关闭分配权限的对话框
   this.showSetRightVisble=false
    }
}
}
</script>
<style lang="less" scoped>
.el-tag {
    margin: 7px;
}
.bdtop{
    border-top: 1px solid #eee;
}
.bdbottom {
    border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>